<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风扇</title>
    <style>
        .fan-wrap  {
            position: relative;
            height: 650px;
        }
        .fan-wrap img{
            position: absolute;
            width: 500px;
        }
        .fan-wrap img.fengye {
            animation-name: rotate;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center 37%;
        }
        .fan-wrap img.stop {
            animation-play-state: paused;
        }
        .fan-wrap img.speed0{
            animation-duration: 0.01s;
        }        
        .fan-wrap img.speed1{
            animation-duration: 0.1s;
        }
        .fan-wrap img.speed2{
            animation-duration: 1s;
        }
        /* .fan-wrap img.start {
            animation-play-state:running;
        } */
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="fan-wrap">
        <img  id="img1" src="./img/fenye.png" alt="" class="fengye stop">
        <img  id="img2" src="./img/fengshan.png" alt="" class="fenshan">
     </div>
     <button id="btn2" onclick="strong()">强</button>
     <button id="btn3" onclick="middle()">中</button>
     <button id="btn4" onclick="worse()">弱</button>
     <button id ="btn1" onclick ="myfunction()">关</button>
    <script>
       var btn = document.getElementById("btn1");
       var image = document.getElementById("img1");
       function myfunction(){
            image.classList.add('stop')
       }
       var btn = document.getElementById("btn2");
       function strong(){
            // image.classList.add('start');
            // image.classList.remove("stop");
            image.classList.value = 'fengye speed0'
        }

        var btn = document.getElementById("btn3");
        function middle(){
        //     image.classList.remove("stop");
        //    image.classList.add("speed1");
           image.classList.value = 'fengye speed1'
        }

        var btn = document.getElementById("btn4");
        function worse(){
            // image.classList.remove("stop");
            // image.classList.add("speed2");
            image.classList.value = 'fengye speed2'
        }
       
    </script>
</body>
</html>